import React from 'react';
import ThemeItem from './Item';
import { WeaSelect, WeaLocaleProvider } from 'ecCom';
import {Col, Row} from "antd";
import classNames from "classnames";
import ColorPicker from 'rc-color-picker';

import {defaultCfg, fontFamilyOpts, fontSizeOpts} from "../../../../../../constants/theme";
const getLabel = WeaLocaleProvider.getLabel;
const layout = {
  Left: 'left',
  Center: 'center',
  Right: 'right'
};

const layoutOpts = () => {
  return [
    { key: layout.Left, selected: false, showname: getLabel('511819','居左') },
    { key: layout.Center, selected: false, showname: getLabel('511820','居中') },
    { key: layout.Right, selected: false, showname: getLabel('511821','居右') }
  ]
};

const scope = 'submitBtn.css';
export default class ThemeSubmitBtnSetting extends React.Component {
  formatFW = () => {
    const { fontWeight } = this.props.data.css;

    if ('bold' === fontWeight) return 'normal';

    return 'bold';
  }

  onFileInputClick(){
    if(this.fileInput){
      this.fileInput.click()
    }
  };

  render() {
    const { onChange, data, onUploadImg } = this.props;

    const css = data && data.css || defaultCfg.submitBtn;
    const textAlign = data && data.textAlign || defaultCfg.submitBtn.textAlign;

    const { fontFamily, fontSize, fontWeight, color, backgroundColor } = css;
    const bold = 'bold' === fontWeight;

    return (
      <div>
        <h4>{getLabel('511827','提交按钮')}</h4>
          <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@nwzm96`} label={getLabel('511805','字体样式')}>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2xw6pi`} style={{ padding: 0 }}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7h5jo1`} span={7}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@py69kt`}
                  value={fontFamily}
                  options={fontFamilyOpts()}
                  onChange={onChange(`${scope}.fontFamily`)}
                />
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@v04kap`} span={6} offset={1}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@im541i`}
                  value={fontSize}
                  options={fontSizeOpts()}
                  onChange={onChange(`${scope}.fontSize`)}
                />
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@c5oq1n`} span={4} offset={1}>
          <span
            onClick={onChange(`${scope}.fontWeight`, this.formatFW)}
            className={classNames('btn-font-weight', { bold })}
          >
            B
          </span>
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w5xie2`} span={4} offset={1}>
                <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@obz15x`}
                  color={color}
                  onChange={onChange(`${scope}.color`)}
                />
              </Col>
            </Row>
          </ThemeItem>
          <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@rq8fxy`} label={getLabel('511826','布局')}>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@9po2e1`}
              detailtype={3}
              value={textAlign}
              options={layoutOpts()}
              onChange={onChange('submitBtn.textAlign')}
            />
          </ThemeItem>
          <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@z1vvn0`} label={getLabel('511783','底色')}>
            <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@cz4n3f`}
              color={backgroundColor}
              onChange={onChange(`${scope}.backgroundColor`)}
            />
          </ThemeItem>
      </div>
    )
  }
}